<template>
  <div class="float-buttons">
    <!-- 上方图标按钮 -->
    <el-button
      type="primary"
      size="large"
      circle
      @click="showReportImage"
      class="icon-button"
    >
     
      <el-icon><Edit /></el-icon>
    </el-button>

    <!-- 下方文字按钮 -->
    <el-button
      type="primary"
      size="large"
      circle
      @click="showReportImage"
      class="text-button"
    >
      APP
    </el-button>
  </div>

  <!-- 图片弹窗保持不变 -->
  <div v-if="visible" class="image-overlay" @click="closeReportImage">
    <div class="image-container" @click.stop>
      <img :src="reportImg" alt="专属薪资报告" class="report-image" @click="handleImageClick"/>
      <el-button type="" circle class="close-button" @click="closeReportImage">
        <el-icon><Close /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {EditPen, Close } from '@element-plus/icons-vue'
import reportImg from '@/assets/images/dialog.png'

export default {
  name: 'ReportImage',
  components: {
    Close
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'navigate'],
  setup(props, { emit }) {
    const router = useRouter()
    const visible = ref(props.modelValue)
    
    const showReportImage = () => {
      visible.value = true
      emit('update:modelValue', true)
    }
    
    const closeReportImage = () => {
      visible.value = false
      emit('update:modelValue', false)
    }
    
    const handleImageClick = () => {
      closeReportImage()
      emit('navigate', '/addsalary')
    }
    
    return {
      visible,
      reportImg,
      showReportImage,
      closeReportImage,
      handleImageClick
    }
  }
}
</script>

<style scoped>
.float-buttons {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 15px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

.icon-button,
.text-button {
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #909399;
    color: #0f2b46;
    font-size: 14px;
    transition: all 0.3s ease;
}

.icon-button:hover,
.text-button:hover {
  background-color: #f5f7fa;
  transform: scale(1.05);
  color:#409eff;
}

/* 其他样式保持不变 */
.image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.image-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}

.report-image {
  max-width: 70%;
  max-height: 90vh;
  cursor: pointer;
}

.close-button {
  position: absolute;
  top: -15px;
  right: 50px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-button {
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #909399;
  color: #0f2b46;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
}

.text-button:hover::after {
  content: '';
  position: absolute;
  top: -100px;
  right: 40px;
  width: 150px;
  height: 150px;
  background-image: url('@/assets/images/erweimaapp.png');
  background-size: cover;
  background-position: center;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
  z-index: 1000;
  display: block;
}
</style>